<template>
<div>
  <!-- <image class="pageImg" src="root:img/page/13.png" /> -->
  <head title="Order details"></head>
  <scroller class="pageContent">
    <div class="orderDetail">
      <div class="order_top" v-for="(item,index) in goodLst" :key="index">
        <div class="imgBox">
          <image class="googPic" :src="item.thumb" resize="cover" />
        </div>
        <div class="goods_info">
          <text class="goods_title">{{item.goodsName}}</text>
          <text class="goods_title">{{item.title}}</text>

          <div class="goods_spec">
            <div class="priceInfo">
              <text class="symbol">AU$</text>
              <text class="money">{{item.price}}</text>
            </div>
            <text>X {{item.number}}</text>
          </div>
        </div>
      </div>
    </div>

    <div class="messagebox mt20">
      <div class="locationBox row jbew atop" @click="setAddress">
        <text class="meth_title locaTit">Address</text>
        <div class="meth_right row jend acen">
          <text
            class="cityName"
            v-if="addressData.id"
          >{{addressData.unit_number}},{{addressData.address}}</text>
          <text class="cityName" v-if="!addressData.id">Set place</text>
          <text class="rightIcon">&#xe6a1;</text>
        </div>
      </div>
    </div>

    <div class="methodBox row jbew acen mt20">
      <text class="meth_title">Delivery Fee</text>
      <div class="meth_right row jend acen">
        <!-- <text class="shipping">{{selected.label}}</text> -->
        <text class="shippingMoney">AU$ {{totalPostage||"0.00"}}</text>
      </div>
    </div>

    <div class="methodBox row jbew acen mt20" @click="showMask=true;alertType='vacht'">
      <text class="meth_title">Vouchers</text>
      <div class="meth_right row jend acen">
        <!-- <text class="shipping">{{selected.label}}</text> -->
        <text class="shippingMoney" v-if="couponPrice">AU$ {{couponPrice }}</text>
        <text class="rightIcon">&#xe6a1;</text>
      </div>
    </div>
    <div class="messagebox mt20">
      <div class="locationBox row jbew atop" @click="show=true ">
        <text class="meth_title locaTit">Delivery time</text>
        <div class="meth_right row jend atop">
          <text class="cityName">{{delivery_time}}</text>
          <text class="rightIcon">&#xe6a1;</text>
        </div>
      </div>
    </div>
    <div class="h150"></div>
  </scroller>
  <div class="footer">
    <div class="settlement">
      <div class="sum">
        <text class="sumTitle">Order total:</text>
        <text class="symbol">AU$</text>
        <text class="money">{{totalPrice}}</text>
      </div>
      <text class="btn" @click="getOrderPay">Confirm</text>
    </div>
  </div>
  <wxc-popup
    :height="getScreenHeight()-400"
    pos="bottom"
    ref="wxcpopup"
    :show="showMask"
    popup-color="transparent"
    @wxcPopupOverlayClicked="showMask=false"
  >
    <!-- 邮费弹出框 -->
    <div class="shopAlert" v-if="alertType=='post'">
      <text class="alertTop">Shipping method</text>
      <scroller class="alertScroll">
        <div
          class="selectLi"
          v-for="item in shippWay"
          :key="item.value"
          @click="selected=item;getOrderConfirm()"
        >
          <text
            class="liIcon"
            :class="[selected.value==item.value?'selected':'']"
          >{{selected.value==item.value?"&#xe602;":"&#xe67f;"}}</text>
          <text class="liTxt" :class="[selected.value==item.value?'selected':'']">{{item.label}}</text>
        </div>
      </scroller>
    </div>
    <scroller class="shopAlert" v-if="alertType=='vacht'">
      <empty
        v-if="couponValidList.length==0"
        tips="Your vouchers is empty"
        img="root:img/e_eva.png"
      ></empty>
      <div class="rowcell" v-for="(row,index) in couponValidList" :key="index">
        <div class="cellBox">
          <div class="boxleft">
            <text class="money">AU$ {{row.reduce}}</text>
            <text class="title">{{row.name}}</text>
            <text class="term">{{row.start_time}} ~ {{row.end_time}}</text>
          </div>
          <text class="line"></text>
          <div class="right">
            <text class="touse" @click="is_coupon='1';getOrderConfirm()">USE</text>
          </div>
        </div>
      </div>
    </scroller>
  </wxc-popup>
  <WxcPopup
    :height="600"
    pos="bottom"
    ref="wxcpopups"
    :show="show"
    @wxcPopupOverlayClicked="show=false"
  >
    <div style="flex:1">
      <div class="popTop">
        <text class="popTopTxt" @click="confirmOPtion('wxcpopups')">Cancel</text>
        <text class="popTopTxt" @click="onOK">Confirm</text>
      </div>
      <div class="pickBox">
        <div class="dayBox">
          <text
            class="daytxt"
            :class="[index==selectId?'activetxt':'']"
            v-for="(item,index) in seasons"
            @click="selectId=index"
            :key="index"
          >{{item.label}}</text>
        </div>
        <div class="timeBox">
          <div
            class="timeTxt"
            @click="item.status==0?deliveryTime=item.value:null"
            v-for="(item,index) in seasons[selectId].children"
            :key="index"
          >
            <text
              :class="[deliveryTime==item.value?'activeTime':'']"
              class="leftTime"
            >{{item.label}}</text>
            <text
              :class="[deliveryTime==item.value?'activeStatus':'']"
              class="rightStatus"
            >{{item.status==0?'Available':'Full'}}</text>
          </div>
        </div>
      </div>
    </div>
  </WxcPopup>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
const navigator = weex.requireModule("navigator");
const selectAddress = new BroadcastChannel("selectAddress");
const creatAddress = new BroadcastChannel("creatAddress");
import { WxcPopup } from "weex-ui";
import { AmPicker } from "weex-amui";

const navbar = weex.requireModule("navbar");

import {
  get_goods_info,
  get_orderConfirm,
  get_address_list,
  get_order_pay,
  get_users_coupon_list,
  getControl
} from "../../mixin/ajax.js";

import asCore from "../../mixin/core";
import Utils from "../../mixin/utils";
export default {
  components: { WxcPopup, AmPicker },
  data() {
    return {
      //是否显示遮罩层
      goodsId: "",
      activity: false,
      showMask: false,
      show: false,
      deliveryName: "",
      alertType: "",
      delivery_time: "",
      deliveryTime: "",
      alertType: "",
      value: [],
      selected: {
        value: "3",
        label: "Australia post"
      },
      seasons: [],
      selectId: 0,
      couponValidList: [],
      take_type: "",
      orderIdArr: [], //购物车ID
      goodId: "", //商品ID
      option_id: "",
      goodLst: [],
      couponPrice: "",
      totalPrice: "", //总价
      totalPostage: "", //总邮费
      number: "",
      co_order_id: "",
      is_coupon: "2",
      shippWay: [
        {
          value: "2",
          label: "Australia post"
        },
        {
          value: "3",
          label: "Giv delivery"
        }
      ],
      addressID: "",
      addressData: {
        province: "",
        unit_number: "",
        id: ""
      },
      goods_title: " "
    };
  },
  created() {
    let that = this;
    selectAddress.onmessage = this.changeAddress;
    creatAddress.onmessage = this.getList;

    getControl({}, (res, flag) => {
      if (flag) {
        if (res.code == 200) {
          this.get7Days(res.data);
        }
      }
    });
  },
  methods: {
    onOK() {
      this.delivery_time = this.deliveryTime;
      // this.show = false;
      this.confirmOPtion("wxcpopups");
      this.getOrderConfirm();
    },
    get7Days(data) {
      //获取系统当前时间
      var now = new Date();
      var nowTime = now.getTime();
      var oneDayTime = 24 * 60 * 60 * 1000;
      let dayArray = [];
      for (var i = 1; i < 4; i++) {
        //显示周一
        var ShowTime = nowTime + i * oneDayTime;
        //                    var ShowTime = nowTime + (i+1)*oneDayTime ;
        //初始化日期时间
        var myDate = new Date(ShowTime);
        var year = myDate.getFullYear();
        var month = myDate.getMonth() + 1;
        var date = myDate.getDate();
        month = month > 10 ? month : "0" + month;
        date = date > 10 ? date : "0" + date;
        let labelVal =  date+ "/" + month + "/" +year ;
        let labelVals = date + "/" + month;
        let childrenList = [
          {
            label: "2PM - 5PM",
            status: data["data" + i].Morning.status,
            value: labelVal + "," + "2PM - 5PM"
          },
          {
            label: "6PM - 9PM",
            status: data["data" + i].Afternoon.status,
            value: labelVal + "," + "6PM - 9PM"
          }
        ];
        if (i == 0) {
          var hours = new Date().getTime();

          var startTime = new Date(
            year + "/" + month + "/" + date + " " + "12:10"
          ).getTime();
          var overtime = new Date(
            year + "/" + month + "/" + date + " " + "16:10"
          ).getTime();
          if (hours > startTime) {
            childrenList = [
              {
                label: "6PM - 9PM",
                status: data["data" + i].Afternoon.status,
                value: labelVal + "," + "6PM - 9PM"
              }
            ];
          }

          if (hours > overtime) {
            continue;
          }
        }
        dayArray.push({
          label: labelVals,
          value: labelVal,
          children: childrenList
        });
      }
      // this.log(dayArray);
      this.seasons = dayArray;
    },
    compareTime(stime, etime) {
      // 转换时间格式，并转换为时间戳
      function tranDate(time) {
        return new Date(time.replace(/-/g, "/")).getTime();
      }
      // 开始时间
      let startTime = tranDate(stime);
      // 结束时间
      let endTime = tranDate(etime);
      let thisDate = new Date();
      // 获取当前时间，格式为 2018-9-10 20:08
      let currentTime =
        thisDate.getFullYear() +
        "-" +
        (thisDate.getMonth() + 1) +
        "-" +
        thisDate.getDate() +
        " " +
        thisDate.getHours() +
        ":" +
        thisDate.getMinutes();
      let nowTime = tranDate(currentTime);
      // 如果当前时间处于时间段内，返回true，否则返回false
      if (nowTime < startTime || nowTime > endTime) {
        return false;
      }
      return true;
    },
    TimeRange(startTime) {
      var startTimes = startTime ? startTime : 8; //日期添加时分秒 开始日期
      var endTimes = 24; //日期添加时分秒 结束日期
      var timeAll = (endTimes - startTimes) / 2;
      let timeArry = [];
      for (let i = 0; i < timeAll; i++) {
        let time1 = startTimes + ":00";
        let time2 = startTimes + 2 + ":00";
        let value = time1 + "-" + time2;
        timeArry.push({ label: value, value: value });
        startTimes = startTimes + 2;
      }
      return timeArry;
    },
    confirmOPtion(element) {
      this.$refs[element].hide();
    },

    getCoupon() {
      get_users_coupon_list(
        { users_id: this.userId, status: "1" },
        (res, flag) => {
          if (flag) {
            if (res.code == 200) {
              this.couponValidList = res.data;
            }
          }
        }
      );
    },
    onLoad(param) {
      if (param && param.param) {
        return false;
      }

      let that = this;
      let list = JSON.parse(param.data);

      this.goodLst = list;
      list.forEach(element => {
        if (element.id) {
          that.orderIdArr.push(element.id);
        }
        if (element.goodsId) {
          that.goodsId = element.goodsId;
          that.option_id = element.option_id;
          that.number = element.number;
        }
      });

      if (param && param.id) {
        this.goodId = param.id;
      }
      asCore.getBsessionid(userId => {
        that.userId = userId;
        that.getCoupon();
        that.getList();
      });
    },

    getOrderConfirm() {
      if (this.showMask) {
        this.$refs.wxcpopup.hide();
      }
      let data = {
        users_id: this.userId,
        order_id: this.orderIdArr.join(","),
        goods_id: this.goodsId,
        number: this.number,
        option_id: this.option_id,
        number: this.number,
        take_type: this.selected.value,
        address_id: this.addressData.id,
        is_coupon: this.is_coupon,
        delivery_time: this.delivery_time
      };

      if (!data.address_id) {
        this.toast("Please set address");
      }

      this.isLoading = true;
      get_orderConfirm(data, (res, flag) => {
        this.isLoading = false;
        if (flag) {
          if (res.code == 200) {
            this.totalPrice = res.data.total.pay_price;
            this.totalPostage = res.data.total.total_postage;
            this.couponPrice = res.data.total.coupon_price;
            this.co_order_id = res.data.total.co_order_id;
            var pref = weex.requireModule("storage");
            pref.setItem("raffleFlag", res.data.raffle);
          } else {
            this.toast(res.message);
          }
        }
      });
    },
    getOrderPay() {
      if (!this.delivery_time) {
        this.alert("Please pick delivery time");
        return false;
      }
      let that = this;
      this.isLoading = true;

      get_order_pay(
        {
          users_id: this.userId,
          co_order_id: this.co_order_id,
          is_pay: 1
        },
        (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (res.code == 200) {
              let url = "root:app/pay/web.js";

              if (that.isWeb) {
                window.location.href = `https://www.empirise.com/mall/public/web/pay.html?id=${res.data.id}&amount=${res.data.pay_price}&userId=${that.userId}`;
              } else {
                this.push(url, {
                  id: res.data.id,
                  amount: res.data.pay_price,
                  userId: that.userId
                });
              }
            } else {
              this.toast(res.message);
            }
          }
        }
      );
    },
    getList() {
      let that = this;
      var pref = weex.requireModule("storage");
      pref.getItem("defaultAddress", event => {
        if (event.result == "success") {
          that.addressData = JSON.parse(event.data);
          this.getOrderConfirm();
        }
      });
    },

    changeAlert(type) {
      var testEl = this.$refs.shopAlert;
      let transform = "100%";
      this.showMask = false;

      if (type == "show") {
        transform = "-100%";
        this.showMask = true;
      }
      const animation = weex.requireModule("animation");
      animation.transition(
        testEl,
        {
          styles: {
            transform: `translateY(${transform})`
          },
          duration: 400, //ms
          timingFunction: "ease",
          delay: 0 //ms
        },
        function() {}
      );
    },
    changeAddress(msg) {
      Object.assign(this.addressData, msg.data);

      this.getOrderConfirm();
    },

    setAddress() {
      this.push("root:app/user/address/address.js", {
        type: "shop"
      });
    }
  }
};
</script>

<style scoped>
.pageImg {
  width: 750px;
  height: 1334px;
}

.pageContent {
  /* margin-top: -1334px; */
  background-color: #f2f2f2;
  flex: 1;
  width: 750px;
}

.mt20 {
  margin-top: 20px;
}
.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}
.orderDetail {
  padding: 30px;
  background-color: #fff;
}

.order_top {
  flex: 1;
  flex-direction: row;
  /* border-bottom-style: solid;
  border-bottom-color: #e6e6e6;
  border-bottom-width: 2px; */
  padding-bottom: 0;
  padding-top: 10px;
}

.imgBox {
  width: 220px;
  height: 200px;
  justify-content: flex-start;
  align-items: center;
}
.popTop {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.popTopTxt {
  display: flex;
  font-size: 30px;
  line-height: 30px;
  padding: 30px 30px;
  font-weight: 500;
}
.pickBox {
  background-color: #f2f2f2;
  flex-direction: row;
  flex: 1;
}
.dayBox {
  flex: 2;
  align-items: center;
  justify-content: center;
}
.daytxt {
  font-size: 34px;
  line-height: 58px;
  margin: 20px 0;
}
.activetxt {
  font-weight: 600;
  font-size: 65px;
}
.timeBox {
  flex: 3;
  align-items: center;
  justify-content: center;
}
.timeTxt {
  flex-direction: row;
  align-items: center;
  margin: 20px 0;
}

.activeTime {
  border-color: #1e1e1e;
  border-width: 5px;
  font-weight: 600;
}
.leftTime {
  border-width: 2px;
  border-color: #ccc;
  border-style: solid;
  padding: 30px 20px;
  font-size: 40px;
}
.rightStatus {
  font-size: 28px;
  margin-left: 20px;
}
.googPic {
  width: 220px;
  height: 200px;
}
.mb200 {
  margin-bottom: 200px;
}
.goods_info {
  height: 220px;
  padding-left: 30px;
  padding-bottom: 10px;
  flex: 1;
  /* justify-content: space-between; */
}

.goods_title {
  font-size: 28px;
  line-height: 36px;
}

.goods_spec {
  padding-top: 30px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0;
}

.priceInfo {
  flex-direction: row;
  align-items: center;
}

.specInfo {
  height: 42px;
  justify-content: space-between;
  padding: 0 5px;
  align-items: center;
  border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6;
  flex-direction: row;
  /* background-color: #f2f22f; */
}

.specText {
  font-size: 22px;
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
  margin-right: 25px;
  color: #999;
}

.iconDown {
  font-size: 22px;
  font-family: iconfont;
  line-height: 40px;
  color: #999;
}

.methodBox {
  width: 750px;
  height: 100px;
  /* margin-bottom: 20px; */
  padding: 0 32px;
  background-color: #fff;
}
.methodBox:active {
  background-color: #f6f6f6;
}

.messagebox {
  width: 750px;
  padding: 0 30px;
  background-color: #fff;
}

.locationBox {
  width: 690px;

  /* 	border-bottom-style: solid;
		border-bottom-color: #e6e6e6;
		border-bottom-width: 2px; */
  padding: 30px 0;
}

.meth_title {
  color: #323232;
  font-size: 30px;
}

.locaTit {
  width: 230px;
}

.meth_right {
  flex: 1;
}

.shipping {
  margin-right: 30px;
  font-size: 30px;
  color: #999999;
}

.rowcell {
  width: 686px;
  /* height: 150px; */
  padding: 16px 0;
  border-radius: 8px;
  background-color: #f2f2f2;
  margin-top: 10px;
}

.cellBox {
  flex: 1;
  width: 686px;
  height: 150px;
  align-items: center;
  flex-direction: row;
  background-color: #f2f2f2;
  position: relative;
}
.h150 {
  width: 750px;
  height: 180px;
}
.line {
  height: 118px;
  border-left-width: 2px;
  border-left-color: #999;
  border-left-style: dashed;
}

.boxleft {
  flex: 1;
  height: 150px;
  position: relative;
  padding-left: 32px;
  justify-content: center;
  border-radius: 16px;
  background-color: #f2f2f2;
}

.money {
  color: #ec414d;
  font-size: 40px;
}

.title {
  margin: 10px 0;
  font-size: 23px;
  color: #666666;
}

.term {
  font-size: 18px;
  color: #999;
}

.right {
  width: 170px;
  height: 150px;
  align-items: center;
  justify-content: center;
  /* 	border-left-width: 1px;
		border-left-color: #000000;
		border-left-style: dashed; */
  background-color: #f2f2f2;
  border-radius: 16px;
}

.touse {
  color: #ffffff;
  background-image: linear-gradient(to right, #d2b37c, #ba8833);
  font-size: 26px;
  width: 112px;
  height: 54px;
  line-height: 54px;
  text-align: center;
  border-radius: 4px;
}
.cityName {
  margin-right: 30px;
  font-size: 30px;
  color: #666666;
  text-align: right;
  flex: 1;
}

.shippingMoney {
  color: #ed404c;
  font-size: 30px;
}

.rightIcon {
  font-family: iconfont;
  font-size: 26px;
  color: #999;
}

.row {
  flex-direction: row;
}

.jbew {
  justify-content: space-between;
}

.jend {
  justify-content: flex-end;
}

.atop {
  align-items: flex-start;
}

.acen {
  align-items: center;
}

.footer {
  width: 750px;
  background-color: #303030;
  height: 100px;

  font-size: 28px;
  position: fixed;
  bottom: 0px;
}

.settlement {
  flex: 1;
  align-items: center;
  flex-direction: row;
  height: 100px;
}

.sum {
  flex: 1;
  font-size: 28px;
  padding-left: 30px;
  height: 100px;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
}

.sumTitle {
  font-size: 30px;
  margin-right: 20px;
  line-height: 30px;
}

.symbol {
  color: #ed404c;
  font-size: 24px;
  line-height: 24px;
  margin-right: 5px;
}

.money {
  font-weight: 500;
  color: #ed404c;
  font-size: 36px;
  line-height: 36px;
}

.btn {
  width: 230px;
  height: 100px;
  line-height: 100px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
}
.btn:active {
  background-color: #000;
}

.hidemask {
  height: 0;
}

.maskAlert {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 456px;
  top: 0;
  /* background-color: rgba(0, 0, 0, 0); */
}

.shopAlert {
  flex: 1;
  background-color: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  align-items: center;
  padding: 32px;
}

.alertTop {
  width: 686px;
  text-align: left;
  padding-bottom: 32px;
  font-size: 28px;
  color: #333333;
}

.alertScroll {
  flex: 1;
}

.selectLi {
  /* margin-bottom: 30px; */
  height: 70px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 750px;
  padding-left: 32px;
}

.liIcon {
  font-size: 40px;
  font-family: iconfont;
  color: #999999;
  margin-right: 10px;
}

.liTxt {
  color: #999999;
  font-size: 28px;
}

.selected {
  color: #ba8833;
}

.sureBtn {
  width: 686px;
  height: 80px;
  line-height: 80px;
  border-radius: 10px;
  margin-bottom: 14px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
}
.btn:active {
  background-color: #000;
}
</style>
